<template>
  <div class="warp">
    <nav-bar class="navbar"  left-arrow fixed :title="centerText" @click-left="onClickLeft"></nav-bar>
    <div class="content">
      <div class="swiper">
        <swipe :autoplay="false" indicator-color="#fff">
          <swipe-item v-for="(image, index) in SwiperImg" :key="index" >
            <img :src="image" />
          </swipe-item>
        </swipe>
      </div>
    </div>
  </div>
</template>
<script >
import { NavBar, Swipe, SwipeItem } from "vant";
export default {
  name: "findPhoto",
  data() {
    return {
      centerText: "详情图片",
      SwiperImg: [
        "https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/39343/4/1551/48272/5cbd71f4E329401dc/579b33f530a1402d.jpg!cr_1125x549_0_72!q70.jpg.dpg",
        "https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/34869/14/3703/113972/5cb953c1E4294d8ea/b73c538710f5c462.jpg!cr_1125x549_0_72!q70.jpg.dpg",
        "https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/39343/4/1551/48272/5cbd71f4E329401dc/579b33f530a1402d.jpg!cr_1125x549_0_72!q70.jpg.dpg",
        "https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/34729/14/3948/120618/5cbeee07Efbe17ec5/d57ddd4fbbbc09e0.jpg!cr_1125x549_0_72!q70.jpg.dpg",
        "https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/34423/17/5378/97852/5cbecd7bE73730c2f/76e5359d8fb3a1e1.jpg!cr_1125x549_0_72!q70.jpg.dpg"
      ]
    };
  },
  props: {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  mounted() {},
  components: {
    NavBar,
    Swipe,
    SwipeItem
  }
};
</script>
<style scoped lang='less'>
.swiper {
  width: 750px;
  height: 460px;
  margin-top: 350px;
  .van-swipe {
    width: 100%;
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    color: #fff;
    background: #fff;
  }
}
.warp {
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    background: #000;
  }
}
.navbar {
  height: 80px;
  background: #000;
  color: #fff;
  line-height: 80px;
}
.van-nav-bar__title {
  color: #fff;
  font-size: 36px;
  font-weight: 600;
}
</style>
